---
section: 5-API
order: 10
name: keyframes
---

# Keyframes

Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).

```jsx
/** @jsxImportSource @compiled/react */
import { keyframes } from '@compiled/react';

const fadeOut = keyframes({
  from: {
    opacity: 1,
  },
  to: {
    opacity: 0,
  },
});

const animationStyles = css({
  animation: `${fadeOut} 2s`,
});

const FadeOut = <div css={animationStyles}>I am fading out!</div>;
```
